$block-spacing: 30px;
$inline-spacing: 15px;
$inline-padding: 15px;

.setting-home{
  height: 100%;
  width: 100%;
  overflow: auto;

  .mf-home-limited{
    padding: 20px 30px;
  }

  .home-title{
    margin-bottom: 15px;
    font-weight: var(--tiklab-font-weight-bold);
  }
  .home-icon{
    font-size: 16px;
    padding-right: 5px;
  }
  .home-left{
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  .home-info{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    font-weight: var(--tiklab-font-weight-bold);
  }
  .home-licence-box{
    margin-bottom: $block-spacing;
    .home-licence {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--tiklab-gray-600);
      padding: 35px 20px;
      gap: $inline-spacing;
      .home-licence-item{
        display: flex;
        align-items: center;
        gap: $inline-spacing;
        .home-licence-item-level{
          display: flex;
          align-items: center;
          .licence-level-img{
            width: 28px;
            height: 28px;
            margin-right: 8px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .licence-level-info{
            font-size: 15px;
            font-weight: var(--tiklab-font-weight-bold);
          }
          .licence-level-issuedTime{
            padding-left: 5px;
            font-size: 12px;
            color: #999999;
          }
        }
        .licence-level-applyAuth{
          padding-top: 5px;
          .licence-level-applyAuth-title{
            padding-right: 5px;
          }
          .licence-level-applyAuth-num{

          }
        }
        .licence-level-info{
          font-weight: var(--tiklab-font-weight-bold);
        }
      }
      .home-licence-sub{
        cursor: pointer;
        color: var(--tiklab-blue);
      }
    }
  }
  .home-role-box{
    background-color: var(--tiklab-gray-600);
    padding: $inline-padding;
    .home-role{
      .home-role-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        cursor: pointer;
        &:hover{
          color: var(--tiklab-blue);
        }
      }
    }
  }
  .home-user-box{
    background-color: var(--tiklab-gray-600);
    padding: $inline-padding 20px;
    .home-user{
      .home-user-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        cursor: pointer;
        &:hover{
          color: var(--tiklab-blue);
        }
      }
    }
  }
  .home-message-box{
    background-color: var(--tiklab-gray-600);
    padding: $inline-padding 20px;
    .home-message{
      .home-message-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        cursor: pointer;
        &:hover{
          color: var(--tiklab-blue);
        }
      }
    }
  }
  .home-config-box{
    background-color: var(--tiklab-gray-600);
    padding: $inline-padding 20px;
    .home-config{
      .home-config-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        cursor: pointer;
        &:hover{
          color: var(--tiklab-blue);
        }
      }
    }
  }
  .home-security-box{
    background-color: var(--tiklab-gray-600);
    padding: $inline-padding 20px;
    .home-security{
      .home-security-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        cursor: pointer;
        &:hover{
          color: var(--tiklab-blue);
        }
      }
    }
  }
  .home-quick-box{
    margin-top: 30px;
    .home-quick{
      .home-quick-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--tiklab-gray-600);
        padding: 30px 20px;
        cursor: pointer;
        &:hover{
          color: var(--tiklab-blue);
        }
        .home-quick-item-title{
          flex: 1;
        }
      }
    }
  }
  .home-chunk-box{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: $inline-spacing;
    white-space: nowrap;
  }

}


